/**
 * 产品管理的Route Component
 * @author: zxy
 * @update: 2017-03-08
 */

import React, {PropTypes} from 'react';
import {connect} from 'dva';
import StoreSettingMenu from '../../components/StoreSetting/StoreSettingMenu';
import ProductManageSearch from '../../components/ProductManage/ProductManageSearch';
import ProductManageList from '../../components/ProductManage/ProductManageList';
import ProductManageModal from '../../components/ProductManage/ProductManageModal';

function ProductManage({location, dispatch, productManage}) {

  const {
    total, pageNumber, loading, pageSize, modalVisible, list, modalLoading, modalType, query, item, btnLoading,
  } = productManage;

  // 产品搜索props
  const ProductManageSearchProps = {
    handleSubmitOk(data){
      dispatch({
        type: 'productManage/query',
        payload: {
          product_name: data.product_name,
        }
      })
    }
  }

  // 产品列表props
  const ProductManageListProps = {
    total, pageNumber, loading, pageSize,
    dataSource: list,

    onPageChange(page) {
      dispatch({
        type: 'productManage/query',
        payload: {
          pageNumber: page,
          pageSize,
        },
      });
    },

    onShowSizeChange(current, pageSize) {
      dispatch({
        type: 'productManage/query',
        payload: {
          pageNumber: current,
          pageSize,
        },
      });
    },

    // 添加产品
    onAdd() {
      dispatch({
        type: 'productManage/showModal',
      })
    },

    // 编辑产品
    onEditItem(id) {
      dispatch({
        type: 'productManage/detail',
        payload: {
          modalType: 'update',
          id,
        },
      });
    },

    // 删除产品
    onDeleteItem(id) {
      dispatch({
        type: 'productManage/delete',
        payload: {
          id,
          pageNumber: pageNumber,
          pageSize: pageSize
        },
      });
    },
  }

  // 产品新增/编辑的props
  const ProductManageModalProps = {
    title: modalType === 'create' ? '添加产品' : '编辑产品',
    item: modalType === 'create' ? {} : item,
    visible: modalVisible,
    modalLoading,
    btnLoading,
    onCancel(){
      dispatch({
        type: 'productManage/hideModal',
      })
    },
    onOkAndAdd(formData, fn) {
      dispatch({
        type: `productManage/${modalType}`,
        payload: {
          formData,
          fn,
          pageNumber: 1,
          pageSize,
        }
      });
    },
    onOk(formData, fn) {
      dispatch({
        type: `productManage/${modalType}`,
        payload: {
          formData,
          fn,
          pageNumber: 1,
          pageSize,
        }
      });
    },
  }

  return (
    <div className="page-wrap">
      <StoreSettingMenu current={location.pathname}/>
      <div className="page-content">
        <ProductManageSearch {...ProductManageSearchProps} />
        <ProductManageList {...ProductManageListProps} />
        <ProductManageModal {...ProductManageModalProps} />
      </div>
    </div>
  );
}

ProductManage.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  productManage: PropTypes.object,
};

export default connect(({productManage}) => ({productManage}))(ProductManage);